<script setup>
import chooseOne from '@/assets/img/icon_chooseOne.png'
const emit = defineEmits(['confirm'])
const { ColumnsData,name,values } = defineProps({
  name: {
    type: String,
    default: ''
  },
  values: {
    type: String,
    default: ''
  },
  ColumnsData: {
    type: Array,
    default: ''
  }
})
const openOrg = (item) => {
  ColumnsData.map(item=>{
    item.disable = false
  })
  item.disable =! item.disable

  emit('update:values', item.value)
  emit('update:name', item.label)
}

watch(
  () => ColumnsData,
  (newVal) => {
    emit('update:ColumnsData', ColumnsData)
  },
  { deep: true }
)
</script>

<template>
  <div style="align-items: normal;" class="flex flex m-t-11px box-border justify-between items-center">

    <!-- {{ ColumnsData }} -->
    <!-- <div class="unit-box box-border w-40%  p-t-10px border-r-1px border-r-solid border-r-[#F2F5FA]">
     <ul>
     <li @click="openOrg(1)">按所属科室</li>
     <li @click="openOrg(2)">按直属单位</li>
     </ul>
  </div> -->
    <div class="unit-box flex-1 p-10px  ">
      <ul class="type-list-item" v-for="item in ColumnsData">
        <li  :class="item.disable ? 'currt' : ''" @click="openOrg(item)">{{ item.label }}</li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
.unit-box {
  font-family: 'PingFangSC-Regula' ;
  font-weight: 400;
  font-size: 14px;
  height: 40vh;
  overflow-y: auto;
  color: #1E2226;

  .type-list-item {
    li {
      height: 35px;
      &.currt {
      color: #229F60;
      background: url('../../../assets/img/icon_chooseOne.png');
      background-repeat: no-repeat;
      font-weight: bold;
      background-position: right top;
     }
    }
  }
}
</style>